<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-center benben-position-layout flex WxPay_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center self-center justify-between flex-sub WxPay_fd0_0'>
					<view class='flex flex-wrap align-center postingDetails_fd0_0_c0' @tap.stop="handleJump"
						v-if="isFinished==false">
						<text class='fu-iconfont2  postingDetails_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-center postingDetails_fd0_0_c0' v-else>
						<text class='fu-iconfont2  postingDetails_fd0_0_c0_c0'></text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center flex-sub'>
						<text class='WxPay_fd0_0_c1_c0'>立即支付</text>
					</view>
					<view class='flex flex-wrap align-center WxPay_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>



			<block v-if="isFinished==false">
				<view class="flex flex-direction flex-wrap align-center benben-flex-layout WxPay_flex_1">
					<view class='flex flex-wrap align-end WxPay_fd1_0'>
						<text class='WxPay_fd1_0_c0'>￥</text>
						<text class=' WxPay_fd1_0_c1' v-if="type==1">
							<text class=' WxPay_price1_fd1_0_c1'>{{ totalPrice | frontPrice }}</text>
							<text class=' WxPay_price2_fd1_0_c1'>{{ totalPrice | laterPrice }}</text>
						</text>
						<text class=' WxPay_fd1_0_c1' v-else>
							<text class=' WxPay_price1_fd1_0_c1'>{{ Info.price | frontPrice }}</text>
							<text class=' WxPay_price2_fd1_0_c1'>{{ Info.price | laterPrice }}</text>
						</text>
					</view>
				</view>

				<!---flex布局flex布局结束-->
				<!---flex布局flex布局开始-->
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout WxPay_flex_3">
					<block>
						<text class='WxPay_fd3_0'>选择支付方式</text>
						<view class='flex flex-wrap align-center justify-between' style="padding: 24rpx 0;">
							<view class='flex flex-wrap align-center'>
								<image class='WxPay_fd3_1_c0_c0' mode="aspectFit" src='../../../static/images/wxpay.png'></image>
								<text class='WxPay_fd3_1_c0_c1'>微信支付</text>
							</view>
							<view class='flex flex-wrap align-center'>
								<image class='WxPay_fd3_1_c1_c0' mode="aspectFit" src='../../../static/images/490.png'></image>
							</view>
						</view>
					</block>
				</view>

				<view class="btn_box">
					<button class='WxPay_fd3_3' @click="Pay()">立即支付</button>
				</view>
			</block>
			<block v-if="isFinished==true">
				<view class="flex flex-direction flex-wrap align-center benben-flex-layout">
					<image class='Success_fd1_0' mode="aspectFit" src='../../../static/images/61.png'></image>
					<text class='Success_fd1_1'>支付成功</text>
					<button class='Success_fd1_3' @tap.stop="goJump">返回</button>
					<button class='Success_fd1_34' @tap.stop="gobind" v-if="isshowBind">去绑定人脸</button>
				</view>
			</block>

		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				rule_id: '', // 充值规则ID
				Info: {
					price: '', // 价格
				},
				orderNum: '', //数量
				cardId: '', //卡id
				marketType: 0,
				totalPrice: '',
				type: '',
				thirdPartyOrderNo: '',
				isFinished: false,
				timer: null,
				coachId:'',
				info:'',
				isshowBind:false
			}
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		onLoad(options) {
			this.getuserinfo()
			if (options.item) {
				this.Info = JSON.parse(options.item);
				this.cardId = this.Info.id
				this.orderNum = options.totalnum
				this.totalPrice = options.totalPrice
				this.type = options.type
				this.coachId=options.coachId
				console.log(this.Info, '购买详情')
			}
			
			
		},
		onShow() {
			uni.onAppShow((res) => {
				console.log(res, '小程序从后台进入前台.');
				// 检查是否有referrerInfo存在，并且处理它
				if (res.referrerInfo && res.referrerInfo.extraData) {
					// 假设 extraData 中有一个 key 叫 'someData'

				}
			});
		},
		methods: {
			//获取用户详细信息
			async getuserinfo() {
				//请求方法
				//数据验证
				let id = uni.getStorageSync('userId')
				let requestUrl = `${global.apiUrls.memberInfo}/${id}`;
				let datauserInfo = await this.$api.get(requestUrl);
				if (datauserInfo.data.code != 200) {
					this.$message.info(datauserInfo.data.msg);
					return
				}
				this.info = datauserInfo.data.data
				if(this.info.ossId==null || this.info.ossId==''){
					this.isshowBind=true
				}
				console.log(this.info, '用户信息')
			},
			gobind(){
				uni.reLaunch({
					url: `/pages/my/invite/invite`
				})
			},
			handleJump() {
				uni.navigateBack();
				this.isFinished = true
			},
			goJump() {
				uni.switchTab({
					url: '/pages/tabBar/homePage/homePage'
				})
			},

			//立即支付
			async Pay() {
				uni.showLoading()
				let time = new Date();
				let formattedDate = time.getFullYear() + '-' +
					('0' + (time.getMonth() + 1)).slice(-2) + '-' +
					('0' + time.getDate()).slice(-2);
				console.log(formattedDate, 'formattedDate');
				let res = await this.$api.post(global.apiUrls.payone, {
					cardId: this.cardId, // 卡id
					orderNum: this.orderNum, //数量
					marketType: this.marketType, //销售类型（0新卡 1续卡）
					payMethod: 'APPLETPAY', //支付方式；1-扫码支付；2-小程序支付；3-现金支付
					gymId: this.Info.gymId,
					coachId:this.coachId,
					registerCardTime:formattedDate
				});
				if (res.data.code != 200) {
					this.$message.info(res.data.msg);
					return
				}
				this.payId = res.data.data.id
				this.paylianjie(this.payId)
			},
			//获取支付链接
			async paylianjie(payid) {
				let res = await this.$api.post(global.apiUrls.paytwo, {
					id: payid, // 订单id
					payMethod: 'APPLETPAY'
				});
				if (res.data.code != 200) {
					this.$message.info(res.data.msg);
					return
				}

				console.log(res, '支付链接信息')
				let info = res.data.data.payInfo
				this.thirdPartyOrderNo = res.data.data.orderNo
				console.log(info.appId, 'appId')
				console.log(info.path, 'path')
				uni.openEmbeddedMiniProgram({
					appId: info.appId,
					path: info.path,
					success: (res) => {
						console.log(JSON.stringify(res, '成功'));
					},
					fail: (fail) => {
						console.log(JSON.stringify(fail, '失败'));
					},
				})

				// 启动定时查询
				this.timer = setInterval(() => {
					if (!this.isFinished) {
						this.Paysuccess();
					} else {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			//支付成功的状态
			async Paysuccess() {
				uni.hideLoading()
				let requestUrl = `${global.apiUrls.paysucces}/${this.thirdPartyOrderNo}`;
				let res = await this.$api.get(requestUrl);
				console.log(res, '支付状态支付状态支付状态')
				if (res.data.data == 2) {
					console.log(res, '支付成功支付成功支付成功')
					this.isFinished = true;
					clearInterval(this.timer);
					this.$message.info('支付成功');
					console.log('22222222222222222')
					return false
				}
				// setTimeout(() => {
				// 	this.isFinished = true;
				// }, 20000)
			},




			// // 立即支付
			// Pay() {
			// 	let pay_way = 'wxpay';
			// 	// 提交订单
			// 	this.submitOrder({
			// 		rule_id: this.rule_id,
			// 		pay_way: pay_way
			// 	});
			// },
			// 提交订单
			submitOrder(param) {
				uni.showLoading({
					title: '支付中...',
					mask: true,
				});
				this.$api.post(global.apiUrls.post65002fbf19364, {
					rule_id: param.rule_id,
					pay_way: param.pay_way,
				}).then(res => {
					if (res.data.code == 1) {
						let order_sn = res.data.data.order_sn;
						/**  微信支付  **/
						// 获取支付信息
						this.getPayConfig({
							order_sn: order_sn,
							pay_type: param.pay_way,
						});
					} else {
						uni.hideLoading();
						this.$message.info(res.data.msg);
						return
					}
				})
			},
			// 获取支付信息
			getPayConfig(param) {
				this.$api.post(global.apiUrls.post63e1bd15aa877, {
					order_sn: param.order_sn,
					pay_type: param.pay_type,
				}).then(res => {
					if (res.data.code == 1) {
						uni.hideLoading();
						let conf = res.data.data;
						// 判断支付平台
						if (param.pay_type == 'wxpay') {
							// 微信支付
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: conf, // 微信订单数据
								success: function(res) {
									this.is_click_btn = 1;
									uni.hideLoading();
									uni.redirectTo({
										url: `/pages/fabu/Success/Success?type=2&order_sn=${param.order_sn}`
									})
								},
								fail: function(err) {
									// console.log('fail:' + JSON.stringify(err));
									this.$message.info('取消支付');
									this.is_click_btn = 1;
									uni.hideLoading();
								}
							});
						} else if (param.pay_type == 'alipay') {
							// 支付宝支付 （此项目不需要  暂不处理）
						}
					} else {
						uni.hideLoading();
						this.$message.info(res.data.msg);
						return
					}
				})
			},

		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto;
	}

	.postingDetails_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.postingDetails_fd0_0_c0 {
		width: 120rpx;
	}

	.WxPay_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
		border-bottom: 1rpx solid #eee;
	}

	.WxPay_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.WxPay_fd0_0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
	}

	.WxPay_fd0_0_c0 {
		width: 100rpx;
		height: 88rpx;
	}

	.WxPay_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.WxPay_flex_1 {
		background: #fff;
		background-size: 100% auto !important;
	}

	.WxPay_fd1_1_c1 {
		background: #FFFFFF;
	}

	.WxPay_fd1_1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.WxPay_fd1_1 {
		margin: 0rpx 0rpx 56rpx 0rpx;
	}

	.WxPay_price2_fd1_0_c1 {
		font-size: 32rpx;
		color: #fa2033;
	}

	.informationDelivery_flex_3 {
		background: #fff;
		margin: 0rpx 104rpx 0rpx 104rpx;
		background-size: #eee;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.informationDelivery_fd3_0 {
		padding: 80rpx 0rpx 80rpx 0rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.informationDelivery_fd3_1 {
		background: rgba(238, 238, 238, 1);
		width: 540rpx;
		height: 1rpx;
		background-size: #eee;
	}

	.informationDelivery_fd3_2_c0_c0 {
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.informationDelivery_fd3_2_c0 {
		border-right: 1px solid #eee;
		padding: 23rpx 100rpx 23rpx 95rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
	}

	.informationDelivery_fd3_2_c1_c0 {
		font-size: 34rpx;
		font-weight: 500;
		color: rgba(1, 50, 189, 1);
	}

	.informationDelivery_fd3_2_c1 {
		padding: 23rpx 100rpx 23rpx 100rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
	}

	.WxPay_price1_fd1_0_c1 {
		line-height: 36rpx;
		font-size: 64rpx;
		font-weight: 700;
		color: rgba(250, 32, 51, 1);
	}

	.WxPay_fd1_0_c1 {
		color: var(--benbenFontColor7);
		font-weight: 700;
		line-height: 94rpx;
		font-size: 64rpx;
	}

	.WxPay_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(250, 32, 51, 1);
		line-height: 100rpx;
	}

	.WxPay_fd1_0 {
		margin: 60rpx 0rpx 60rpx 0rpx;
	}

	.WxPay_flex_2 {
		background: rgba(246, 247, 249, 1);
		height: 20rpx;
		background-size: 100% auto !important;
	}

	.WxPay_flex_3 {
		background: #fff;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 12rpx 32rpx;
		margin: 20rpx 0rpx 120rpx 0rpx;
	}

	.btn_box {
		width: 750rpx;
		text-align: -webkit-center;
		margin-top: 200rpx;
		position: fixed;
		bottom: 100rpx;
	}

	.WxPay_fd3_3 {
		background: #167deb;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		bottom: calc(50rpx + var(--window-bottom));
		text-align: center;
		left: 32rpx;
	}

	.WxPay_fd3_333 {
		font-size: 24rpx;
		color: rgba(1, 50, 189, 1);
		// position: fixed;
		// bottom: calc(152rpx + var(--window-bottom));
		margin-bottom: 30rpx;
	}

	.WxPay_fd3_2_c0_c2 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.WxPay_fd3_2_c0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
	}

	.WxPay_fd3_2_c0 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.WxPay_fd3_1_c1_c0 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.WxPay_fd3_1_c0_c1 {
		font-size: 32rpx;
		color: #333;
	}

	.WxPay_fd3_1_c0_c0 {
		width: 56rpx;
		height: 56rpx;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.WxPay_fd3_0 {
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		padding: 32rpx 0rpx 32rpx 0rpx;
		line-height: 40rpx;
	}

	.WxPay_flex_4 {
		width: 540rpx;
	}

	.WxPay_fd4_0_c1_c1 {
		background: #fff;
		font-size: 32rpx;
		color: var(--benbenFontColor5);
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		height: 110rpx;
		line-height: 110rpx;
	}

	.WxPay_fd4_0_c1_c0 {
		border-right: 1px solid rgba(238, 238, 238, 1);
		background: #fff;
		font-size: 32rpx;
		color: var(--benbenFontColor2);
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		height: 110rpx;
		line-height: 110rpx;
	}

	.WxPay_fd4_0_c0_c1_c0_c1 {
		background: #FFFFFF;
	}

	.WxPay_fd4_0_c0_c1_c0 {
		text-align: center;
	}

	.WxPay_fd4_0_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
		margin: 0rpx 0rpx 40rpx 0rpx;
	}

	.WxPay_fd4_0_c0 {
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		padding: 40rpx 30rpx 32rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.WxPay_fd4_0 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.WxPay_flex_5 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.WxPay_fd5_1_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: #fff;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor5);
		padding: 0rpx 100rpx 0rpx 100rpx;
		font-weight: 500;
	}

	.WxPay_fd5_1_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor2);
		padding: 0rpx 102rpx 0rpx 103rpx;
		font-weight: 400;
	}

	.WxPay_fd5_0 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin: 91rpx 0rpx 88rpx 0rpx;
	}

	.WxPay_fd6_0_c2_c1 {
		background: #fff;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 33rpx;
		color: var(--benbenFontColor5);
		width: 269rpx;
		font-weight: 500;
		line-height: 94rpx;
	}

	.WxPay_fd6_0_c2_c0 {
		border-right: 1px solid #eee;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor2);
		line-height: 94rpx;
		width: 269rpx;
		font-weight: 400;
	}

	.WxPay_fd6_0_c2 {
		border-top: 1px solid #eee;
	}

	.WxPay_flex_password_noActive_fd6_0_c1 {
		border: 1px solid #ccc;
		width: 68rpx;
		height: 68rpx;
	}

	.WxPay_flex_password_active_fd6_0_c1 {
		border: 1px solid #409EFF;
		width: 68rpx;
		height: 68rpx;
	}

	::v-deep .WxPay_fd6_0_c1 {
		margin: 32rpx 0rpx 32rpx 0rpx;
	}

	.WxPay_fd6_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.WxPay_fd6_0 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	.Success_fd1_0 {
		width: 164rpx;
		height: 164rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 111rpx 0rpx 0rpx 0rpx;
	}

	.Success_fd1_1 {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: 600;
		line-height: 45rpx;
		margin: 25rpx 0rpx 0rpx 0rpx;
	}

	.Success_fd1_3 {
		background: rgba(240, 240, 240, 1);
		border-radius: 36rpx;
		width: 226rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		margin: 50rpx 0rpx 0rpx 0rpx;
	}
	.Success_fd1_34 { 
		background: #167deb;
		border-radius: 36rpx;
		width: 226rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 50rpx 0rpx 0rpx 0rpx;
	}
</style>